<!-- 字典 -->
<template>
  <div class="container">
    <!-- 控件 -->
    <div class="controlBox">
      <el-form ref="form" :inline="true" :model="search" label-width="80px" size="mini">
        <el-form-item label="字典名称" >
          <el-input v-model="search.dictName" placeholder="请输入字典名称"></el-input>
        </el-form-item>
        <el-form-item label="字典类型" >
          <el-input v-model="search.dictType" placeholder="请输入字典类型"></el-input>
        </el-form-item>
        <el-form-item label="字典状态" >
          <el-select v-model="search.status" placeholder="请选择字典状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="getDictListFun">搜  索</el-button>
        </el-form-item>
      </el-form>  
      <el-button slot="reference" type="primary" size="mini" @click="centerDialogVisible = true">+ 新增字典</el-button>
      <!-- popup -->
      <el-dialog
        title=""
        :visible.sync="centerDialogVisible"
        width="40%"
        center
      >
        <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="80px">
          <el-form-item label="字典名称" prop="dictName">
            <el-input v-model="form.dictName" />
          </el-form-item>
          <el-form-item label="字典类型" prop="dictType">
            <el-input v-model="form.dictType" />
          </el-form-item>
          <el-form-item label="字典状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio label="正常" value="0"></el-radio>
              <el-radio label="停用" value="1"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" />
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('form')">提 交</el-button>
        </span>
      </el-dialog>

    </div>
    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      height="700px"
      :header-cell-style="{background:'#efefef'}"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="dictId" label="编号" width="" />
      <el-table-column prop="dictName" label="字典名称" width="" />
      <el-table-column prop="dictType" label="字典类型" width="" >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="gotoPage(scope.$index, scope.row)"
          >{{ scope.row.dictType }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="" />
      <el-table-column prop="createTime" label="创建日期" width="" />
      <el-table-column prop="remark" label="备注" width="" />
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            style="color:#f56c6c"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          >移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="controlBox"
      style="margin-top:20px"
      background 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]" 
      :page-size="pageSize"         
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">    
  </el-pagination>
  </div>
</template>

<script>
import { addDict,getDictList } from '@/api/user'
export default {
  components: {},
  data() {
    return {
      centerDialogVisible: false,
      currentPage:1,  //  初始页
      pageSize:10,    //  每页的数据
      total:0,   //总条数
      search:{
        dictName:'',
        dictType:'',
        status:""
      },
      form: {
        dictName:'',
        dictType:'',
        status:'',
        remark:'',
      },
      rules: {
        id: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { required: true, pattern: '^[0-9]{2}$', message: '请输入正确的账号，账号位2位数字', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入负责人姓名', trigger: 'blur' }
        ],
        phoneNum: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { required: true, pattern:"^1[3456789]\\d{9}$",message: '请输入正确的联系电话', trigger: 'blur' },
        ],
        remark: [
          { required: true, message: '请填写备注', trigger: 'blur' }
        ],
        dictName: [
          { required: true, message: '字典名称不能为空', trigger: 'blur' }
        ],
        dictType: [
          { required: true, message: '字典类型不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输密码', trigger: 'blur' },
          { required: true, pattern: '^[A-Za-z0-9]{6,8}$', message: '密码为6~8位数字和字母', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },
      tableData: [
        {
          // id: '1',
          // date: '2016-05-03',
          // name: '王小虎',
          // type: 'asfasf',
          // dictValue:'0',
          // dictSort:'0',
          // state: '正常',
          // remark: '要你管'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getDictListFun()
  },
  mounted() {},
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addDict(
            this.form.dictName,
            this.form.dictType,
            this.form.status == '正常' ? 0 : 1,
            this.form.remark,
          ).then(res=>{
            if(res.code == 2000){
              this.$message('添加成功')
              this.form = {
                dictName:'',
                dictType:'',
                status:'',
                remark:'',
              }
              this.centerDialogVisible = false;
              this.getDictListFun()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    // 初始页currentPage、初始每页数据数pageSize和数据data
    handleSizeChange: function (size) {
        this.pageSize = size;
        this.getDictListFun()
        console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        this.getDictListFun()
        console.log(this.currentPage)  //点击第几页
    },
    //前往字典类型
    gotoPage(index,row){
      // console.log(index,row)
      this.$router.push({path:'dictType',query:{data:JSON.stringify(row)}})
    },
    //获取字典列表
    getDictListFun(){
      getDictList(
        this.currentPage,
        this.pageSize,
        this.search.dictName,
        this.search.dictType,
        this.search.status 
      ).then(res=>{
        // console.log(res)
        this.tableData = res.data.dictType
        this.total = res.data.total
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  padding: 20px;
  .controlBox{
     padding-bottom: 20px;
  }
}
</style>
